<template>
	<view class="container">
		<view class="example-body" style="padding-top: 50px">
			<cl-upload ref="uploadRef" :autoUpload="false" v-model:modelValue="fileLists" action="请求地址"></cl-upload>

			<button class="mt-4" @click="onUpload">上传</button>
		</view>
	</view>
</template>
<script>
import { watch } from 'vue';
export default {
	setup(props) {
		const uploadRef = ref(null);
		const fileLists = ref();

		watch(
			() => fileLists.value,
			(newVal) => {
				console.log(newVal);
			},
			{ deep: true, immediate: true }
		);

		const onUpload = () => {
			uploadRef.value.submit().then((reslut) => {
				console.log(reslut); // 本次提交成功服务器返回数据

				// 上传第三方服务器需要手动同步数据
				// 上传uniCloud则不需要
				// const imgUrls = reslut.list.map((imgInfo) => imgInfo.url);
				// this.list2 = [...this.list2, ...imgUrls];
			});
		};

		return {
			uploadRef,
			fileLists,
			onUpload
		};
	}
};
</script>

<style lang="scss">
.example-body {
	padding: 10px;
	padding-top: 0;
}

.custom-image-box {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.text {
	font-size: 14px;
	color: #333;
}
</style>
